<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_DOM操作2</title>
</head>
<body>
<input type="text" id="i1">
<input type="text" id="i2">
<button onclick="f1()">按钮1</button>
<hr>
<h3>震惊:<span class="s"></span></h3>
<button onclick="f2()">按钮2</button>
<script>
    function f2(){
        let spanE = document.querySelector('.s');
        // spanE.innerHTML = '昨日A股涨幅高达...'
        // spanE.innerHTML = '昨日<mark>A股</mark>涨幅高达...'
        spanE.innerHTML = '<table border="1px"><tr><td>张三</td><td>30</td><td>男</td></tr>'
        console.log(spanE)
    }
    function f1(){
        let input1 = document.querySelector('#i1');//根据id选择器获取元素
        let input2 = document.getElementById('i2');//根据id值获取元素
        //我们可以从input元素的value属性中获取用户输入的值
        //注意:输入框中获取的值是字符串类型的，还需要转换为number类型才能计算
        let i1 = parseFloat(input1.value);
        let i2 = parseFloat(input2.value);
        console.log(i1,typeof i1);
        console.log(i2,typeof i2);
        console.log(i1+i2);
    }
</script>
</body>
</html>